<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.hidden{
			display: none;
		}
		#div1{
			position: absolute;
			top: 50px;
			left: 100px;
		}
		#div2{
			position: absolute;
			top:200px;
			left: 500px;
		}
		a{
			display: block;
			float: left;
			width: 20px;
			height: 20px;
			background: #ccc;
			border: 1px solid #fff;
			text-align: center;
			line-height: 20px;

		}
	</style>
   <script type="text/javascript">
   	function $(id){
	 return document.getElementById(id);
		}
			var max=4;
			var now=1;
			var timer;
		function show(id){
			if(id){
               now=id;
               clearTimeout(timer);
			}
			for(var i=1;i<5;i++){
				if(i==now){
               $("ad-0"+i).style.display="block";
				}else{
			   $("ad-0"+i).style.display="none";
				}
			}
			if(now==max){
				now=1;
			}else{
				now++;
			}
			timer=setTimeout(show, 2000);
		}

   	window.onload=function(){
           show();
   	}
   </script>
</head>
<body>
	<div id="div1">
		<img src="images/ad-01.jpg"  id="ad-01" >
		<img src="images/ad-02.jpg" id="ad-02" class="hidden">
		<img src="images/ad-03.jpg" id="ad-03" class="hidden">
		<img src="images/ad-04.jpg" id="ad-04" class="hidden">
	</div>
		<div id="div2">
		<a onmouseover="show(1)">1</a>
		<a onmouseover="show(2)">2</a>
		<a onmouseover="show(3)">3</a>
		<a onmouseover="show(4)">4</a>

	</div>
</body>
</html>